<HTML>
<HEAD>
<TITLE>JavaScript Source Code 3000:  Games:  Crab Race</TITLE>
<META HTTP-EQUIV="JavaScript Source Code 3000" CONTENT = "no-cache">
<META NAME="date" CONTENT="2000-09-09">
<META NAME="channel" CONTENT="Web Developer">
<META NAME="author" CONTENT="Mike McGrath (mike_mcgrath@lineone.net)">
<META NAME="section" CONTENT="Games">
<META NAME="description" CONTENT="Places your bets on your favorite colored crab in a virtual crab race.  Each crab has different odds and has different payouts.  Good luck!">
</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff>

<BR>
<center>
<table width=600 cellpadding=0 cellspacing=10>
<tr>
<td width=468 align=center>

    
    
</td>
<td width=120 align=center>
    
</td>
</tr>
</table>
<BR>
<BR>
<basefont size=3>
<FONT SIZE="+2" FACE="Helvetica,Arial">
<A HREF="../index.htm" /" TARGET="_top"><FONT COLOR="#0000FF"><b>Home</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<A HREF="index.htm" /games/"><font color="#FF0000"><b>Games</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<FONT COLOR="#006666"><b>Crab Race</b></font></font>
<BR>
<BR>
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td><font FACE="helvetica,arial,geneva">
<br>
<br>
<!-- Description --><!--content_start-->
Places your bets on your favorite colored crab in a virtual crab race.  Each crab has different odds and has different payouts.  Good luck!
<hr>
</td></tr>
</table>
<!-- Demonstration -->
<center>
<form name="open-race">
<input type=button value="Play Crab Race" onClick="window.open('crab-race-example.html','race','top=100,left=100,width=340,height=300');">
</form>
</center>
<br><br>
You must also save this image<br>
to your server to use this game.<br>
Right-click the images below and<br>
select "Save Image As..."<br><br>
<img src="../img/crab/crab.gif" /img/crab/crab.gif" width=31 height=22 border=1><br><br>
<P>
<P>
<a name="source">
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva"><b>JavaScript Source Code 3000:  Games:  Crab Race (Opener)</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s).  The script is yours!!!
<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt.focus();this.form.txt.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  0.59 KB" size="24">
</DIV>

<textarea NAME="txt" ROWS=20 COLS=75 WRAP=VIRTUAL>

&lt;!-- ONE STEP TO INSTALL CRAB RACE OPENER:

  1.  Add the code into the BODY of your HTML document  --&gt;

&lt;!-- STEP ONE: Paste this code into the BODY of your HTML document  --&gt;

&lt;center&gt;
&lt;form name="open-race"&gt;
&lt;input type=button value="Play Crab Race" onClick="window.open('crab-race-example.html','race','top=100,left=100,width=340,height=300');"&gt;
&lt;/form&gt;
&lt;/center&gt;

 

&lt;!-- Script Size:  0.59 KB --&gt;</textarea><br><font FACE="helvetica,arial,geneva"></font></td></tr>
</table>

<br><br>

<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva"><b>JavaScript Source Code 3000:  Games:  Crab Race (Game)</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s).  The script is yours!!!
<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy2">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt2.focus();this.form.txt2.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  10.80 KB" size="24">
</DIV>

<textarea NAME="txt2" ROWS=20 COLS=75 WRAP=VIRTUAL>

&lt;!-- THREE STEPS TO INSTALL CRAB RACE:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the onLoad event handler into the BODY tag
  3.  Put the last coding into the BODY of your HTML document  --&gt;

&lt;!-- STEP ONE: Paste this code into the HEAD of your HTML document  --&gt;

&lt;HEAD&gt;

&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!-- Original:  Mike McGrath (mike_mcgrath@lineone.net) --&gt;
&lt;!-- Web Site:  http://website.lineone.net/~mike_mcgrath --&gt;

&lt;! &gt;
&lt;! &gt;

&lt;!-- Begin
function browser_check() {
var lecture = "Your browser does not support dynamic HTML   \n"
+"- this page cannot display in your browser.";
var browser = (document.all || document.layers) ? true : alert(lecture);
}
//  End --&gt;
&lt;/script&gt;
&lt;/HEAD&gt;

&lt;!-- STEP TWO: Insert the onLoad event handler into your BODY tag  --&gt;

&lt;BODY OnLoad="browser_check()"&gt;

&lt;!-- STEP THREE: Copy this code into the BODY of your HTML document  --&gt;

&lt;SCRIPT LANGUAGE="JavaScript"&gt;

&lt;!-- Begin

// where you stored the crab image on your server
var pic = "http://www.your-web-site-address-here.com/where/you/saved/it/crab.gif";

var mask = '&lt;IMG SRC="' + pic + '"&gt;';
var fancy, stake, level, winner;
var total = 10000;
var running = 0;
var stopped = 1;
var odds  = new Array();
var step  = new Array();

var band='&lt;TABLE BORDER=1 BORDERCOLOR=#000000 WIDTH=300 HEIGHT=160 ALIGN=CENTER CELLPADDING=0 CELLSPACING=0&gt;&lt;FORM NAME="f"&gt;&lt;TR&gt;';
band  += '&lt;TD COLSPAN=4 BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE&gt;&lt;INPUT TYPE=TEXT NAME="msg" SIZE=24 VALUE="" &gt;&lt;/TD&gt;&lt;/TR&gt;&lt;TR&gt;';
band  += '&lt;TD BGCOLOR=#FF0000 ALIGN=CENTER VALIGN=MIDDLE&gt;&lt;INPUT TYPE=TEXT  NAME="box0" SIZE=3 VALUE="" onfocus="blur(this)"&gt;&lt;BR&gt;&lt;INPUT TYPE=RADIO NAME="back" VALUE="red" onclick="choose_fancy(this.form,this.value);"&gt;&lt;/TD&gt;';
band  += '&lt;TD BGCOLOR=#00FF00 ALIGN=CENTER VALIGN=MIDDLE&gt;&lt;INPUT TYPE=TEXT  NAME="box1" SIZE=3 VALUE="" onfocus="blur(this)"&gt;&lt;BR&gt;&lt;INPUT TYPE=RADIO NAME="back" VALUE="green" onclick="choose_fancy(this.form,this.value);"&gt;&lt;/TD&gt;';
band  += '&lt;TD BGCOLOR=#0000FF ALIGN=CENTER VALIGN=MIDDLE&gt;&lt;INPUT TYPE=TEXT  NAME="box2" SIZE=3 VALUE="" onfocus="blur(this)"&gt;&lt;BR&gt;&lt;INPUT TYPE=RADIO NAME="back" VALUE="blue" onclick="choose_fancy(this.form,this.value);"&gt;&lt;/TD&gt;';
band  += '&lt;TD BGCOLOR=#FFF000 ALIGN=CENTER VALIGN=MIDDLE&gt;&lt;INPUT TYPE=TEXT  NAME="box3" SIZE=3 VALUE="" onfocus="blur(this)"&gt;&lt;BR&gt;&lt;INPUT TYPE=RADIO NAME="back" VALUE="yellow" onclick="choose_fancy(this.form,this.value);"&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;TR&gt;';
band  += '&lt;TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE&gt;&lt;INPUT TYPE=BUTTON VALUE=" 1000 " onclick="choose_stake(this.form,this.value);"&gt;&lt;/TD&gt;';
band  += '&lt;TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE&gt;&lt;INPUT TYPE=BUTTON VALUE=" 2000 " onclick="choose_stake(this.form,this.value);"&gt;&lt;/TD&gt;';
band  += '&lt;TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE&gt;&lt;INPUT TYPE=BUTTON VALUE=" 3000 " onclick="choose_stake(this.form,this.value);"&gt;&lt;/TD&gt;';
band  += '&lt;TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE&gt;&lt;INPUT TYPE=BUTTON VALUE=" 4000 " onclick="choose_stake(this.form,this.value);"&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;TR&gt;';
band  += '&lt;TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE&gt;&lt;INPUT TYPE=BUTTON NAME="next" VALUE="Reset" onclick="init();"&gt;&lt;/TD&gt;';
band  += '&lt;TD BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE&gt;&lt;INPUT NAME="wlt" TYPE=TEXT SIZE=5 VALUE='+total+' onfocus="blur(this)"&gt;&lt;/TD&gt;';
band  += '&lt;TD COLSPAN=2 BGCOLOR=#C0C0C0 ALIGN=CENTER VALIGN=MIDDLE&gt;&lt;INPUT TYPE=BUTTON NAME="go" VALUE=" Start Race  " onclick="lets_go(this.form);"&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/FORM&gt;&lt;/TABLE&gt;';
if(document.all)
{ 
var content=('&lt;DIV ID="trak" STYLE="position:absolute; top: 20; left:20; width:300; height:100; background:#000000;"&gt;&lt;/DIV&gt;');
content  += ('&lt;DIV ID="line" STYLE="position:absolute; top: 20; left:287;width:  1; height:100; background:#FFFFFF;"&gt;&lt;/DIV&gt;');
content  += ('&lt;DIV ID="book" STYLE="position:absolute; top:120; left:20; width:300; height:160; background:#C0C0C0;"&gt;'+band+'&lt;/DIV&gt;');
content  += ('&lt;DIV ID="redc" STYLE="position:absolute; top: 23; left:20; width: 31; height: 22; background:#FF0000;"&gt;'+mask+'&lt;/DIV&gt;');
content  += ('&lt;DIV ID="grnc" STYLE="position:absolute; top: 47; left:20; width: 31; height: 22; background:#00FF00;"&gt;'+mask+'&lt;/DIV&gt;');
content  += ('&lt;DIV ID="bluc" STYLE="position:absolute; top: 71; left:20; width: 31; height: 22; background:#0000FF;"&gt;'+mask+'&lt;/DIV&gt;');
content  += ('&lt;DIV ID="yelc" STYLE="position:absolute; top: 96; left:20; width: 31; height: 22; background:#FFF000;"&gt;'+mask+'&lt;/DIV&gt;');
}
else if (document.layers)
{
var content=('&lt;LAYER ID="trak" top=" 20" left="20" width="300" height="100" bgColor="#000000"&gt;&lt;/LAYER&gt;');
content  += ('&lt;LAYER ID="line" top=" 20" left="287" width="1"  height="100" bgColor="#FFFFFF"&gt;&lt;/LAYER&gt;');
content  += ('&lt;LAYER ID="book" top="120" left="20" width="300" height="160" bgColor="#C0C0C0"&gt;'+band+'&lt;/LAYER&gt;');
content  += ('&lt;LAYER ID="redc" top=" 23" left="20" width=" 31" height=" 22" bgColor="#FF0000"&gt;'+mask+'&lt;/LAYER&gt;');
content  += ('&lt;LAYER ID="grnc" top=" 47" left="20" width=" 31" height=" 22" bgColor="#00FF00"&gt;'+mask+'&lt;/LAYER&gt;');
content  += ('&lt;LAYER ID="bluc" top=" 71" left="20" width=" 31" height=" 22" bgColor="#0000FF"&gt;'+mask+'&lt;/LAYER&gt;');
content  += ('&lt;LAYER ID="yelc" top=" 96" left="20" width=" 31" height=" 22" bgColor="#FFF000"&gt;'+mask+'&lt;/LAYER&gt;');
}
document.write(content);
init();
function init()
{
if(!running)
{
fancy="";
stake="";
level="";
stopped = 0;
for(i=0; i&lt;4; i++)
{
odds[i] = Math.round(Math.random() * 3)+1;
step[i] = eval(10 - odds[i]);
odds[i] +="/1";
}
if(document.all)
{
document.all.msg.value  = "Place your bet ..."
document.all.box0.value = odds[0];
document.all.box1.value = odds[1];
document.all.box2.value = odds[2];
document.all.box3.value = odds[3];
for(i=0; i&lt;4; i++)
{
document.all.back[i].checked=0;
}
document.all.redc.style.left=20;
document.all.grnc.style.left=20;
document.all.bluc.style.left=20;
document.all.yelc.style.left=20;
}
if(document.layers)
{
with(document.book)
{
document.f.msg.value  = "Place your bet ..."
document.f.box0.value = odds[0];
document.f.box1.value = odds[1];
document.f.box2.value = odds[2];
document.f.box3.value = odds[3];
for(i=0; i&lt;4; i++)
{
document.f.back[i].checked=0;
   }
}
document.redc.left = 20;
document.grnc.left = 20;
document.bluc.left = 20;
document.yelc.left = 20;
      }    
   }
}
function choose_fancy(f,color)
{
if(!running) 
{ 
switch(color)
{
case "red"    : level=odds[0]; break;
case "green"  : level=odds[1]; break;
case "blue"   : level=odds[2]; break;
case "yellow" : level=odds[3]; break;
}
fancy = color;
if(stake != "") f.msg.value="Bet: "+fancy+" "+stake+" ("+level+")";
else f.msg.value= "Selected "+fancy;
   }
}
function choose_stake(f,amount)
{
if(!running) 
{
stake = amount;
if(fancy != "") f.msg.value="Bet: "+fancy+" "+stake+" ("+level+")";
else f.msg.value = "Stake "+stake;
   }
}

function lets_go(f)
{
if(!running && stopped) init();
if(!running && !stopped)
{
if(stake &gt; parseInt(f.wlt.value)) f.msg.value="Cannot bet this amount!";
else
if(fancy == "") f.msg.value="Select a color";
else
if(stake == "") f.msg.value="Click a bet amount";
else
{
running = 1;
run_race();
      }
   }
}
function run_race()
{
var n = Math.floor(Math.random() * 4);
if(document.all)
{
switch(n)
{
case 0 : document.all.redc.style.left = parseInt(document.all.redc.style.left)+step[0];
         if(parseInt(document.all.redc.style.left) &gt;= 288) 
         {
         document.all.redc.style.left = 288;
         winner = "red";
         running = 0;
         stopped = 1;
         }
         break;

case 1 : document.all.grnc.style.left = parseInt(document.all.grnc.style.left)+step[1];
         if(parseInt(document.all.grnc.style.left) &gt;= 288) 
         {
         document.all.grnc.style.left = 288;
         winner = "green";
         running = 0;
         stopped = 1;
         }
         break;

case 2 : document.all.bluc.style.left = parseInt(document.all.bluc.style.left)+step[2];
         if(parseInt(document.all.bluc.style.left) &gt;= 288) 
         {
         document.all.bluc.style.left = 288;
         winner = "blue";
         running = 0;
         stopped = 1;
         }
         break;

case 3 : document.all.yelc.style.left = parseInt(document.all.yelc.style.left)+step[3];
         if(parseInt(document.all.yelc.style.left) &gt;= 288) 
         {
         document.all.yelc.style.left = 288;
         winner = "yellow"; 
         running = 0;
         stopped = 1;
         }
         break;
   }
}
if(document.layers)
{
switch(n)
{
case 0 : document.redc.left += step[0];
         if(document.redc.left &gt;= 288)
         {
         document.redc.left = 288;
         winner = "red"; 
         running = 0;
         stopped = 1;
         }
         break;
case 1 : document.grnc.left += step[1];
         if(document.grnc.left &gt;= 288)
         {
         document.grnc.left = 288;
         winner = "green";
         running = 0;
         stopped = 1;
         }
         break;
case 2 : document.bluc.left += step[2];
         if(document.bluc.left &gt;= 288)
         {
         document.bluc.left = 288;
         winner = "blue";
         running = 0;
         stopped = 1;
         }
         break;
case 3 : document.yelc.left += step[3];
         if(document.yelc.left &gt;= 288)
         {
         document.yelc.left = 288;
         winner = "yellow";
         running = 0;
         stopped = 1;
         }
         break;
   }
}
if(running) window.setTimeout("run_race()", 100);
else
results();
}
function results()
{
if(document.all)
{
if(winner == fancy)
{
var winnings = parseInt(stake) * parseInt(level.charAt(0));
document.f.msg.value = winner+" wins: win "+winnings;
total += winnings;
document.f.wlt.value = total;
}   
else
{
document.f.msg.value = winner+" wins: lose "+stake;
total -= parseInt(stake);
document.f.wlt.value = total;
}
if(parseInt(document.f.wlt.value) == 0) var refill = confirm("You're Broke! - Play Again? ");
if(refill)
{
total = 10000;
document.f.wlt.value = total;
init();
   }
}
if(document.layers)
{
with(document.book)
{
if(winner == fancy)
{
var winnings = parseInt(stake) * parseInt(level.charAt(0));
document.f.msg.value = winner+" wins: win "+winnings;
total += winnings;
document.f.wlt.value = total;
}   
else
{
document.f.msg.value = winner+" wins: lose"+stake;
total -= parseInt(stake);
document.f.wlt.value = total;
}
if(parseInt(document.f.wlt.value) == 0) var refill = confirm("You're Broke! - Play Again? ");
if(refill)
{
total = 10000;
document.f.wlt.value = total;
init();
         }
      }
   }
}
//  End --&gt;
&lt;/script&gt;

 

&lt;!-- Script Size:  10.80 KB --&gt;</textarea><br><font FACE="helvetica,arial,geneva"></font></td></tr>

</table>
</form>
</FONT>
</CENTER>


</center>
</body></html>



